<template>
  <grid-layout :layout="layout">
    <template #left>
      <div style="width: 100%; height: 100%; box-sizing: border-box" class="flex flex-column">
        <radio-button-group
          v-model="activeRadio"
          :options="radioList"
          @change="getTreeData"
          class="flex-fixed"
          style="margin-bottom: 10px"
        />
        <!--        <a-input-search v-model:value="searchName" placeholder="请输入名称" class="flex-fixed" style="margin: 10px 0" />-->
        <div class="flex-auto-height" style="overflow-y: auto">
          <a-tree
            v-model:expandedKeys="expandedKeys"
            v-model:checked-keys="activeKeys"
            :treeData="treeData"
            :field-names="{ children: 'nodes', title: 'text', key: 'id' }"
            checkable
            @check="treeCheck"
          />
        </div>
      </div>
    </template>
    <template #right>
      <video-wall :monitor-list="checkedList" @gridChange="gridChange" />
    </template>
  </grid-layout>
</template>

<script>
import { netHouseAreaTree, netHouseYardTree, plentyEngineeringDetail, plentyEngineeringList } from '@gis/lib/api';
import { handleCommonRes } from '@gis/lib/utils/resolver.js';
import GridLayout from '@gis/lib/layouts/grid-layout.vue';
import areaCodeMixin from '@gis/lib/mixins/areaCodeMixin.js';
import LiveVideo from '@gis/lib/components/player/index.jsx';
import VideoWall from '../video-wall/index.vue';
import { message } from 'ant-design-vue';

export default {
  name: 'video-list',
  mixins: [areaCodeMixin],
  props: {
    details: { type: Object, default: () => ({}) }, //默认选中监控
  },
  components: { VideoWall, LiveVideo, GridLayout },
  data() {
    return {
      gridCount: 1,
      checkedList: [],
      expandedKeys: [], //默认一级展开
      activeKeys: [],
      treeData: [],
      searchName: '',
      activeRadio: 1,
      radioList: [
        { label: '按区域', value: 1 },
        { label: '按小区点位', value: 2 },
      ],
      activeId: '',
      videoList: [],
      videoData: {},
      layout: [
        { name: 'left', colSpan: 5, style: { padding: '10px' } },
        { name: 'right', colSpan: 19 },
      ],
    };
  },
  created() {
    this.getTreeData();
  },
  methods: {
    gridChange(val) {
      // console.log(val, '宫格树222');
      this.gridCount = val;
    },
    treeCheck(checkedKeys) {
      this.checkedList = checkedKeys.filter((item) => item.indexOf('.') < 0);
      // console.log(this.checkedList, '选中列表');
      if (this.checkedList && this.checkedList.length > this.gridCount) {
        message.warn('选择视频数量大于宫格数量！');
      }
    },
    async getTreeData() {
      const params = Object.assign({}, this.apiParams);
      const api = this.activeRadio == 1 ? netHouseAreaTree : netHouseYardTree;
      const data = await handleCommonRes(api, params);
      // 没有监控的树节点，禁止选择
      function disabledTree(list) {
        if (!list && !list.length) return [];
        for (let i = 0; i < list.length; i++) {
          if (list[i].nodes && list[i].nodes.length > 0) {
            disabledTree(list[i].nodes);
            let jkChildList = list[i].nodes.filter((item) => !item.disabled);
            list[i].disabled = jkChildList.length ? false : true;
          } else {
            list[i].disabled = list[i].id.indexOf('.') >= 0 ? true : false;
          }
        }
        return list;
      }
      this.treeData = disabledTree(data);
      // 默认展开一级
      this.expandedKeys = this.treeData.map((item) => item.id);
    },
  },
};
</script>

<style scoped lang="less">
//.list-item {
//  padding: 0 20px;
//  font-size: 14px;
//  cursor: pointer;
//  line-height: 32px;
//  &.active {
//    background: url('../../../../assets/menu_pic_check_t.png') center center no-repeat;
//    background-size: 100% 100%;
//  }
//}
</style>
